<template>
  <div class="wicket" v-if="videoCheck">
    <div class="close" @click="closeFun">
      <el-icon><close-bold /></el-icon>
    </div>
    <div class="video">
      <video :src="video_url"></video>
      <div class="progressBar">
        <div class="play" @click="playFun(play)">
          <img src="@/assets/image/material/play_icon.png" alt="" v-show="play" />
          <img src="@/assets/image/material/suspend_icon.png" alt="" v-show="!play" />
        </div>
        <div class="progress">
          <progress :value="progress" max="1" />
          <div class="time">
            <span class="start">{{ startTime }}</span>
            <span class="end">{{ endTime }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useFocus } from 'element-plus'
  import { ref, watch } from 'vue'
  let videoCheck = ref(false)
  let play = ref(true)
  let progress = ref('0')
  let startTime = ref('00:00')
  let endTime = ref('00:00')
  let video_url = ref('')

  // 关闭播放器窗口
  const closeFun = () => {
    videoCheck.value = false
    progress.value = '0'
    startTime.value = '00:00'
    endTime.value = '00:00'
    play.value = true
  }

  // 获取起始时间
  const getTime = () => {
    let video = document.querySelector('video')
    let minute = Math.floor(video.duration / 60)
    let second = Math.floor(video.duration % 60)

    endTime.value = `${mendZero(minute) || '00'}:${mendZero(second) || '00'}`
  }

  // 获取当前时间
  const nowTime = () => {
    let video = document.querySelector('video')
    let minute = Math.floor(video.currentTime / 60)
    let second = Math.floor(video.currentTime % 60)

    let now_time = video.currentTime
    let end_time = video.duration
    let speed = now_time / end_time

    if (speed == 1) {
      play.value = true
    }

    progress.value = speed
    startTime.value = `${mendZero(minute)}:${mendZero(second)}`
  }

  // 播放和暂停
  const playFun = (state: boolean) => {
    let video = document.querySelector('video')
    play.value = !state
    getTime()

    const Time = setInterval(() => {
      if (videoCheck.value) {
        nowTime()
      }
    }, 1000)

    if (state) {
      video.play()
      Time
      // console.log('开始')
    } else {
      video.pause()
      clearInterval(Time)
      // console.log('暂停')
    }
  }

  const mendZero = (num: any) => {
    if (num < 10) {
      num = '0' + num
    }
    return num
  }
  defineExpose({
    videoCheck,
    video_url,
    getTime
  })
</script>

<style lang="scss" scoped>
  .wicket {
    position: fixed;
    display: flex;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    background: rgba($color: #000, $alpha: 0.6);
    align-items: center;
    justify-content: center;
    .close {
      display: inline-block;
      width: 40px;
      height: 40px;
      position: absolute;
      top: 50px;
      right: 50px;
      background: white;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-size: 30px;
    }
    .video {
      width: 60%;
      height: 70%;
      display: flex;
      flex-direction: column;
      min-width: 1000px;
      min-height: 700px;
      background: white;
      video {
        width: 100%;
        height: 650px;
        background: black;
      }
      .progressBar {
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        .play {
          width: 75px;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .progress {
          flex: 1;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 20px 0 0;
          box-sizing: border-box;
          flex-direction: column;
          position: relative;
          progress {
            width: 100%;
          }
          .time {
            width: 98%;
            position: absolute;
            bottom: 0px;
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }
  }
</style>
